<template>
  <div class="r" v-show="leftStyle">
    <!-- <div id="room"> -->
    <div style="height: 10px;"></div>
    <div class="room">
      <div class="weui-loadmore weui-loadmore_line" v-show="tishi">
        <span class="weui-loadmore__tips">暂无数据</span>
      </div>
      <div>
        <div class="share" v-for="(share, index) in shareData" :key="index">
          <div class="share-one">
            <div class="weui-cell">
              <div class="weui-cell__hd"><img v-if="share.gameType === 'HONGZHONG'" src="../img/majiang-icon-old.png">
                <img v-else-if="share.gameType === 'DIANZINIU'" src="../img/dianzi-bull.png">
                <img v-else-if="share.gameType === 'BULLFIGHT'" src="../img/bull-icon-old.png">
                <img v-else-if="share.gameType === 'OXFIGHT'" src="../img/fight-bull.png">
                <img v-else-if="share.gameType === 'SANGONG'" src="../img/sangong.png">
                <img v-else-if="share.gameType === 'HUACHUAN'" src="../img/sangong.png">
                <img v-else-if="share.gameType === 'JINHUA'" src="../img/wansanzhang.png">
              </div>
              <div class="weui-cell__bd">
                <p v-if="share.gameType === 'HONGZHONG'">红中麻将</p>
                <p v-else-if="share.gameType === 'DIANZINIU'">点子牛牛</p>
                <p v-else-if="share.gameType === 'BULLFIGHT'">经典牛牛</p>
                <p v-else-if="share.gameType === 'OXFIGHT'">公牛</p>
                <p v-else-if="share.gameType === 'SANGONG'">三公</p>
                <p v-else-if="share.gameType === 'HUACHUAN'">无庄开船</p>
                <p v-else-if="share.gameType === 'JINHUA'">玩三张</p>
              </div>
              <p>房间号：{{share.roomNo}}</p>
              <div class="weui-cell__ft" @click="shareButtom(share)" v-if="share.start === false " >
                <img src="../img/share.png" style="width: 50px;height:30px;">
              </div>
              <div class="weui-cell__ft" @click="shareButtomAn()" v-else-if="share.start === true ">
                <img src="../img/shareAn.png" style="width: 50px;height:30px;">
              </div>
            </div>
    <!-- <hr /> -->
            <div class="share-two">
              <ul>
                <li v-for="(play, index) in share.players" :key="index">
                  <img :src='play.headUrl' alt="" style="border-radius: 15px; margin-left:10px;margin-top:5px;float:left;" />
                  <span style="color:#afecff;vertical-align:super;float:right;">{{short(play.nickname)}}</span>
                </li>
              </ul>
            </div>
    <!-- <hr style="border:0.5px;"/> -->
            <div class="share-three">
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <p v-if="share.payType === 1 "> 支付方式：AA支付</p>
                  <p v-else-if="share.payType === 2 "> 支付方式：房主支付</p>
                </div>
                <div class="weui-cell__bd" style="margin-left:15px;">
                  <p>玩法ID：{{share.confId}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="share-f">
            <div class="weui-cell" style="padding: 2px 0px 0px; margin-right: 15px;">
              <div class="weui-cell__bd">
              </div>
              <div class="weui-cell__ft" style="color:white;">{{share._createTime}}</div>
            </div>
          </div>
        </div>
        <div class="record" v-for="(record, index) in recordData" :key="index">
          <div class="record-one">
            <div class="weui-cell">
              <div class="weui-cell__hd">
                <img v-if="record.gameType === 'HONGZHONG'" src="../img/majiang-icon-old.png">
                <img v-else-if="record.gameType === 'DIANZINIU'" src="../img/dianzi-bull.png">
                <img v-else-if="record.gameType === 'BULLFIGHT'" src="../img/bull-icon-old.png">
                <img v-else-if="record.gameType === 'OXFIGHT'" src="../img/fight-bull.png">
                <img v-else-if="record.gameType === 'SANGONG'" src="../img/sangong.png">
                <img v-else-if="record.gameType === 'HUACHUAN'" src="../img/sangong.png">
                <img v-else-if="record.gameType === 'JINHUA'" src="../img/sangong.png">
              </div>
              <div class="weui-cell__bd">
                <p v-if="record.gameType === 'HONGZHONG'">红中麻将</p>
                <p v-else-if="record.gameType === 'DIANZINIU'">点子牛牛</p>
                <p v-else-if="record.gameType === 'BULLFIGHT'">经典牛牛</p>
                <p v-else-if="record.gameType === 'OXFIGHT'">公牛</p>
                <p v-else-if="record.gameType === 'SANGONG'">三公</p>
                <p v-else-if="record.gameType === 'HUACHUAN'">无庄开船</p>
                <p v-else-if="record.gameType === 'JINHUA'">玩三张</p>
              </div>
              <p>房间号：{{record.roomNo}}</p>
              <a :href='record.url'>
                <div class="weui-cell__ft"><img style="width:50px;height:30px;" src="../img/record.png"></div>
              </a>
            </div>
            <div class="record-two">
              <ul>
                <li v-for="(recordPe, index) in record.totalSettleVo" :key="index">
                  <span style="padding-left:10px;color:#afecff;float:left;">{{short(recordPe.nickName)}}</span>
                  <span style="color:#afecff;float:right;">{{recordPe.point}}</span>
                </li>
              </ul>
            </div>
            <div class="record-three">
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <p v-if="record.gameType === 'HONGZHONG' && record._ruleType === 5">八个码/{{record.totalTurns}}局</p>
                  <p v-else-if="record.gameType === 'HONGZHONG' && record._ruleType === 1">一码全中/{{record.totalTurns}}局</p>
                  <p v-else-if="record.gameType === 'HONGZHONG' && record._ruleType === 2">两个码/{{record.totalTurns}}局</p>
                  <p v-else-if="record.gameType === 'HONGZHONG' && record._ruleType === 3">四个码/{{record.totalTurns}}局</p>
                  <p v-else-if="record.gameType === 'HONGZHONG' && record._ruleType === 4">六个码/{{record.totalTurns}}局</p>
                  <p v-else-if="record.gameType === 'OXFIGHT' && record._bottomType === 1">10分/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'OXFIGHT' && record._bottomType === 2">20分/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'OXFIGHT' && record._bottomType === 3">30分/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'OXFIGHT' && record._bottomType === 4">50分/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'BULLFIGHT' && record._ruleType === 1">抢庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'BULLFIGHT' && record._ruleType === 2">牛牛庄家/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'BULLFIGHT' && record._ruleType === 3">牌大坐庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'BULLFIGHT' && record._ruleType === 4">轮庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'BULLFIGHT' && record._ruleType === 5">霸王庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'DIANZINIU' && record._ruleType === 6">牛几几倍/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'DIANZINIU' && record._ruleType === 7">牛牛相差/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'HUACHUAN' && record._ruleType === 0">无庄开船/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 0">无庄开船/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 1">抢庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 2">三公庄家/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 3">牌大坐庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 4">轮庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                  <p v-else-if="record.gameType === 'SANGONG' && record._ruleType === 5">霸王庄/{{record.totalTurns}}局/{{record._showCardCount}}张可见</p>
                </div>
              </div>
            </div>
          </div>
          <div class="record-f">
            <div class="weui-cell" style="padding:0;padding-top:2px;margin-right:15px;">
              <div class="weui-cell__bd">
              </div>
              <div class="weui-cell__ft" style="color:white;">{{record._createTime}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="weui-cells" style="margin-top:0;position:static;height:100%;background-color:transparent">
        <div class="weui-cell" style="height:100%;padding:0;padding-left:3%;">
          <a :href='loginU'>
            <div class="weui-cell__hd"><img src="../img/back-btn.png" style="width:20px;height:20px;"></div>
          </a>
          <div class="weui-cell__bd" style="margin-left:28%;">
            <p style="color:white;font-size:20px;">我的房间</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      leftStyle: {
      },
      shareData: [],
      recordData: [],
      _createTime: '',
      _ruleType: '',
      _bottomType: '',
      _showCardCount: '',
      shareListP: [],
      ShareNickname: '',
      // shareshare: false,
      loginU: '',
      tishi: false,
      // nickname: '',
      shareUrl: '',
      shareAppId: '',
      shareLink: '',
      shareNonceStr: '',
      shareSignature: '',
      shareTimestamp: '',
      gameTypeName: '',
      payTypeName: '',
      bottomTypeName: '',
      type: '',
      showCardCountName: '',
      turns: '',
      imgUrlname: '',
      descName: '',
    }
  },
  mounted() {
    this.getHeigh()
    this.showRoom()
    this.short()
  },
  methods: {
    getHeigh() {
      this.leftStyle = {
        height: document.body.offsetHeight + 'px'
      }
      console.log('leftStyle', this.leftStyle)
    },
    short(nickname) {
      if (nickname) {
        if (nickname.length > 2) {
          return nickname.slice(0, 4)
        }
      }
      return nickname
    },
    showRoom() {
      const send = {
      }
      this.api.roomShare.getRoomShow(send).then(res => res.json()).then(data => {
        console.log('showROOM', data)
        if (data.result === 0) {
          this.tishi = false;
          this.shareData = data.data.dataList[0].shareList
          console.log('shareData', this.shareData)
          this.recordData = data.data.dataList[0].recordList
          if (this.shareData !== null || this.recordData !== null) {
            if (this.shareData !== null) {
              this.shareData.forEach(item => {
                item._createTime = new Date(item.createTime).toLocaleString()
              })
            }
            if (this.recordData !== null) {
              this.recordData.forEach(item => {
                item._createTime = new Date(item.createTime).toLocaleString()
                this.re = JSON.parse(item.roomDescribe)
                item._ruleType = this.re.ruleType
                item._bottomType = this.re.bottomType
                item._showCardCount = this.re.showCardCount
              })
            }
          } else {
            $.toast('战绩和房间都没有', 'forbidden');
            this.tishi = true;
          }
        } else if (data.result === 2) {
          $.toast(data.message, 'forbidden');
          this.tishi = true;
        }
        this.loginU = data.data.dataList[0].loginUrl
        // console.log('url', this.loginU)
      })
    },
    shareButtomAn() {
      $.toast('游戏中,不能分享', 'forbidden');
    },
    shareButtom(item) {
      $.toast('请点击右上角进行分享', 'text');
      console.log('item', item)
      console.log('payType', item.roomConf.payType)
      console.log('room', item.roomNo)
      if (item.gameType === 'OXFIGHT') {
        this.gameTypeName = '公牛'
        this.type = 10001
        this.imgUrlname = 'fight-bull.png'
      } else if (item.gameType === 'HONGZHONG') {
        this.gameTypeName = '红中麻将'
        this.type = 10003
        this.imgUrlname = 'majiang-icon-old.png'
      } else if (item.gameType === 'DIANZINIU') {
        this.gameTypeName = '点子牛牛'
        this.type = 10001
        this.imgUrlname = 'dianzi-bull.png'
      } else if (item.gameType === 'BULLFIGHT') {
        this.gameTypeName = '经典牛牛'
        this.type = 10001
        this.imgUrlname = 'bull-icon-old.png'
      } else if (item.gameType === 'SANGONG') {
        this.gameTypeName = '三公'
        this.type = 10006
        this.imgUrlname = 'sangong.png'
      } else if (item.gameType === 'HUACHUAN') {
        this.gameTypeName = '无庄划船'
        this.type = 10006
        this.imgUrlname = 'sangong.png'
      }
      if (item.roomConf.payType === 1) {
        this.payTypeName = 'AA支付'
      } else if (item.roomConf.payType === 2) {
        this.payTypeName = '房主支付'
      }
      // 公牛
      if (item.roomConf.bottomType === 1) {
        this.bottomTypeName = '10分'
      } else if (item.roomConf.bottomType === 2) {
        this.bottomTypeName = '20分'
      } else if (item.roomConf.bottomType === 3) {
        this.bottomTypeName = '30分'
      } else if (item.roomConf.bottomType === 4) {
        this.bottomTypeName = '50分'
      }
      // 红中
      if (item.roomConf.ruleType === 5 && item.gameType === 'HONGZHONG') {
        this.bottomTypeName = '八个码'
      } else if (item.roomConf.ruleType === 1 && item.gameType === 'HONGZHONG') {
        this.bottomTypeName = '一码全中'
      } else if (item.roomConf.ruleType === 2 && item.gameType === 'HONGZHONG') {
        this.bottomTypeName = '两个码'
      } else if (item.roomConf.ruleType === 3 && item.gameType === 'HONGZHONG') {
        this.bottomTypeName = '四个码'
      } else if (item.roomConf.ruleType === 4 && item.gameType === 'HONGZHONG') {
        this.bottomTypeName = '六个码'
      }
      // 牛牛
      if (item.roomConf.ruleType === 1 && item.gameType === 'BULLFIGHT') {
        this.bottomTypeName = '抢庄'
      } else if (item.roomConf.ruleType === 2 && item.gameType === 'BULLFIGHT') {
        this.bottomTypeName = '牛牛庄家'
      } else if (item.roomConf.ruleType === 3 && item.gameType === 'BULLFIGHT') {
        this.bottomTypeName = '牌大坐庄'
      } else if (item.roomConf.ruleType === 4 && item.gameType === 'BULLFIGHT') {
        this.bottomTypeName = '轮庄'
      } else if (item.roomConf.ruleType === 5 && item.gameType === 'BULLFIGHT') {
        this.bottomTypeName = '霸王庄'
      } else if (item.roomConf.ruleType === 6 && item.gameType === 'DIANZINIU') {
        this.bottomTypeName = '牛几几倍'
      } else if (item.roomConf.ruleType === 7 && item.gameType === 'DIANZINIU') {
        this.bottomTypeName = '牛牛相差'
      } else if (item.roomConf.ruleType === 0 && item.gameType === 'HUACHUAN') {
        this.bottomTypeName = '无庄开船'
      } else if (item.roomConf.ruleType === 0 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '无庄开船'
      } else if (item.roomConf.ruleType === 1 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '抢庄'
      } else if (item.roomConf.ruleType === 2 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '三公庄家'
      } else if (item.roomConf.ruleType === 3 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '牌大坐庄'
      } else if (item.roomConf.ruleType === 4 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '轮庄'
      } else if (item.roomConf.ruleType === 5 && item.gameType === 'SANGONG') {
        this.bottomTypeName = '霸王庄'
      }
      // 几张可见
      this.showCardCountName = item.roomConf.showCardCount
      // 总局数
      this.turns = item.roomConf.turns
      // 描
      if (item.gameType === 'HONGZHONG') {
        this.descName = this.payTypeName + ';' + '玩法:' + this.bottomTypeName + ';' + '总局数:' + this.turns // 分享描述
      } else {
        this.descName = this.payTypeName + ';' + '玩法:' + this.bottomTypeName + ';' + this.showCardCountName + '张可见' + ';' + '总局数:' + this.turns // 分享描述
      }
      // this.type = item.gameType + 10000
      // this.shareshare = true;
      this.shareUrl = Cookies.get('shareUrl')
      const send = {
        shareUrl: this.shareUrl
      }
      this.api.roomShare.getAppId(send).then(res => res.json()).then(data => {
        console.log('appId', data)
        this.shareAppId = data.data.shareAppId
        this.shareLink = data.data.shareLink
        this.shareNonceStr = data.data.shareNonceStr
        this.shareSignature = data.data.shareSignature
        this.shareTimestamp = data.data.shareTimestamp
        wx.config({
          // debug: true,
          debug: false,
          appId: this.shareAppId,
          timestamp: this.shareTimestamp,
          nonceStr: this.shareNonceStr,
          signature: this.shareSignature,
          jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
          ]
        });
        // 分享到朋友圈
        // wx.onMenuShareTimeline({
        //   title: '', // 分享标题
        //   desc: 'hahaha',
        //   link: this.shareLink, // 分享链接，该链接域名必须与当前企业的可信域名一致
        //   imgUrl: '', // 分享图标
        //   success: function() {
        //     // 用户确认分享后执行的回调函数
        //   },
        //   cancel: function() {
        //     // 用户取消分享后执行的回调函数
        //   }
        // });
        // 分享给朋友
        wx.onMenuShareAppMessage({
          title: this.gameTypeName + '  [' + '房间号:' + item.roomNo + ']  ', // 分享标题
          desc: this.descName,
          link: this.shareLink + '?' + 'roomNo=' + item.roomNo + '&type=' + this.type, // 分享链接，该链接域名必须与当前企业的可信域名一致
          imgUrl: 'http://c-c.jiahuagame.com/game_resource/gameicon/'+ Cookies.get('areaCode')+ '/' + this.imgUrlname, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
      })
    },
  },
  computed: {
    ...mapState(['api', 'VueEventBus'])
  },
  components: {
  }
}

</script>

<style lang="less">
.r {
  background-image: url('../img/bg.png');
  height: 100%;
  width: 100%;
  background-size: cover;
}

.room {
  height: 90%;
  width: 94%;
  margin-left: 3%;
  background-image: url('../img/bg-big.png');
  border-radius: 10px;
  overflow-y: auto;
  background-size: cover;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 14px;
}

.footer:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

footer {
  height: 8%;
  line-height: 8%;
  position: absolute;
  width: 100%;
  bottom: 0;
  background-image: url('../img/back-bottom.png');
  flex: 0 0 auto;
  .back-area {
    float: left;
    margin-top: 3.5%;
    margin-left: 3%;
    .back {
      font-size: 28px;
    }
  }
  .text {
    font-size: 28px;
    color: white;
    float: right;
    text-align: center;
    margin-right: 35%;
  }
}
.share {
  height: 30%;
  width: 97%;
  margin-left: 1.5%;
  .share-one {
    background: linear-gradient( #122845, #112d4a);
    opacity: 0.9;
    margin-top: 10px;
    width: 98%;
    margin-left: 1%;
    .weui-cell {
      padding: 0;
      padding-top: 5px;
      padding-left: 10px;
      padding-right: 10px;
      img {
        height: 40px;
        width: 40px;
      }
      .weui-cell__bd {
        p {
          color: white;
        }
      }
      p {
        color: white;
      }
      .weui-cell__ft {
        margin-left: 5px;
        margin-top: 5px;
      }
    }
  }
}

.record {
  height: 28%;
  width: 96%;
  margin-left: 1.5%;
  .record-one {
    background: linear-gradient( #122845, #112d4a);
    opacity: 0.9;
    margin-top: 10px;
    width: 94%;
    margin-left: 3%;
    .weui-cell {
      padding: 0;
      padding-top: 5px;
      padding-left: 10px;
      padding-right: 10px;
      img {
        height: 40px;
        width: 40px;
      }
      .weui-cell__bd {
        p {
          color: white;
        }
      }
      p {
        color: white;
      }
      .weui-cell__ft {
        margin-left: 5px;
        margin-top: 5px;
      }
    }
  }
}

.record-two:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

.record-two {
  ul {
    li {
      list-style: none;
      width: 33%;
      float: left;
      span {
        font-size: 13px;
      }
    }
  }
}

.share-two:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

.share-two {
  ul {
    li {
      list-style: none;
      width: 33%;
      float: left;
      line-height: 27px;
      img {
        width: 25px;
        height: 25px;
      }
      span {
        font-size: 13px;
      }
    }
  }
}

.weui-cells:after,
.weui-cells:before {
  position: static;
}

.weui-cell__ft {
  font-size: 13px;
}

.weui-cell {
  .weui-cell__hd {
    p {
      font-size: 13px;
    }
  }
  .weui-cell__bd {
    p {
      font-size: 13px;
    }
  }
  p {
    font-size: 13px;
  }
  .weui-cell__ft {
    font-size: 13px;
  }
}

@media screen and (max-width:320px) {
  .record-two ul li span {
    font-size: 10px;
  }
}

@media screen and (max-width:320px) {
  .share-two ul li span {
    font-size: 10px;
  }
  .share-two ul li img {
    margin-top: 8px;
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width:320px) {
  .weui-cell {
    .weui-cell__hd {
      p {
        font-size: 10px;
      }
    }
    .weui-cell__bd {
      p {
        font-size: 10px;
      }
    }
    .weui-cell__ft {
      font-size: 10px;
    }
  }
  .weui-cell p {
    font-size: 10px;
  }
}
</style>
